<template>
	<view class="all-type">
		<!-- 内容 -->
		<view class="content uni-flex" id="content">
			<!-- left导航-->
			<view class="cont-left" :style="{height:winHeight+'px'}">
				<scroll-view scroll-y class="scoll-y menu-wrap">
					<view class="menu-item font26" :class="{'active': currentMenu === index}" v-for="(item, index) in leftMenu" :key="index"
					 @tap="selectLeftMenu(index)">{{item.name}}</view>
				</scroll-view>
			</view>
			<!-- right选项 -->
			<view class="cont-right" :style="{height:winHeight+'px'}">
				<scroll-view scroll-y class="scoll-y" :scroll-into-view="clickId" :scroll-with-animation="true" @scroll="scroll">
					<right-menu ref="rightMenu" :rightMenu="rightMenu"></right-menu>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from 'vuex'
	import search from '@/components/search/search.vue'
	import rightMenu from '@/pages/project/components/right-menu.vue'
	export default {
		components: {
			search,
			rightMenu
		},
		computed: {
			...mapGetters(['themeBgColor', 'darkMode']),
		},
		data() {
			return {
				searchVal: '', // 搜索框值
				winHeight: "", // 窗口高度
				contentHeight: "", // 内容高度
				// 左边菜单
				currentMenu: 0,
				clickId: "",
				isLeftClick: false,
				topList:[],
				leftMenu: [{
						name: '项目类型'
					},
					{
						name: '项目年份'
					},
					{
						name: '审批状态'
					}
				],
				// 右侧菜单
				rightMenu: [{
						name: '材料统计',
						menuList: [{
								text: ' 入库统计',
								icon: 'navicon-rkyw'
							},
							{
								text: ' 出库统计',
								icon: 'chukuoff'
							},
							{
								text: ' 库存统计',
								icon: 'navicon-kcgl'
							},
							{
								text: ' 入库统计',
								icon: 'navicon-rkyw'
							},
							{
								text: ' 出库统计',
								icon: 'chukuoff'
							},
							{
								text: ' 库存统计',
								icon: 'navicon-kcgl'
							}
						]
					},
					{
						name: '费用统计',
						menuList: [
							{
								text: ' 费用统计',
								icon: 'feiyong'
							},
							{
								text: ' 人及费用',
								icon: '25'
							},
							{
								text: ' 材料费用',
								icon: 'shouyetubiao-09'
							},
							{
								text: ' 费用统计',
								icon: 'feiyong'
							},
							{
								text: ' 人及费用',
								icon: '25'
							},
							{
								text: ' 材料费用',
								icon: 'shouyetubiao-09'
							},
							{
								text: ' 费用统计',
								icon: 'feiyong'
							},
							{
								text: ' 人及费用',
								icon: '25'
							},
							{
								text: ' 材料费用',
								icon: 'shouyetubiao-09'
							},
							{
								text: ' 费用统计',
								icon: 'feiyong'
							},
							{
								text: ' 人及费用',
								icon: '25'
							},
							{
								text: ' 材料费用',
								icon: 'shouyetubiao-09'
							}
						]
					},
					{
						name: '对比分析',
						menuList: [{
								text: ' 入库统计',
								icon: 'navicon-rkyw'
							},
							{
								text: ' 出库统计',
								icon: 'chukuoff'
							},
							{
								text: ' 库存统计',
								icon: 'navicon-kcgl'
							},
							{
								text: ' 其他费用',
								icon: 'qita'
							},
							{
								text: ' 入库统计',
								icon: 'navicon-rkyw'
							},
							{
								text: ' 出库统计',
								icon: 'chukuoff'
							},
							{
								text: ' 库存统计',
								icon: 'navicon-kcgl'
							},
							{
								text: ' 其他费用',
								icon: 'qita'
							},
							{
								text: ' 入库统计',
								icon: 'navicon-rkyw'
							},
							{
								text: ' 出库统计',
								icon: 'chukuoff'
							},
							{
								text: ' 库存统计',
								icon: 'navicon-kcgl'
							},
							{
								text: ' 其他费用',
								icon: 'qita'
							},
							{
								text: ' 入库统计',
								icon: 'navicon-rkyw'
							},
							{
								text: ' 出库统计',
								icon: 'chukuoff'
							},
							{
								text: ' 库存统计',
								icon: 'navicon-kcgl'
							},
							{
								text: ' 其他费用',
								icon: 'qita'
							}
						]
					},
					{
						name: '项目查看',
						menuList: [
							{
								text: ' 入库统计',
								icon: 'navicon-rkyw'
							},
							{
								text: ' 出库统计',
								icon: 'chukuoff'
							},
							{
								text: ' 库存统计',
								icon: 'navicon-kcgl'
							},
							{
								text: ' 入库统计',
								icon: 'navicon-rkyw'
							},
							{
								text: ' 出库统计',
								icon: 'chukuoff'
							},
							{
								text: ' 库存统计',
								icon: 'navicon-kcgl'
							},
							{
								text: ' 入库统计',
								icon: 'navicon-rkyw'
							},
							{
								text: ' 出库统计',
								icon: 'chukuoff'
							},
							{
								text: ' 库存统计',
								icon: 'navicon-kcgl'
							}
						]
					}
				],
			}
		},
		onReady() {
			this.getNodesInfo();
		},
		onShow() {},
		onLoad() {
			//  高度自适应
			uni.getSystemInfo({
				success: res => {
					this.winHeight = res.windowHeight
				}
			})
		},
		methods: {
			// 搜索
			search() {
				console.log('search')
				// this.$refs.projectListRef.queryByName(this.searchVal)
			},
			// 清空搜索
			clear() {
				this.searchVal = ''
				this.search()
			},
			//  切换左侧导航
			selectLeftMenu(index) {
				this.currentMenu = index
				this.clickId = "po" + index;
				this.isLeftClick = true;
			},
			// 监听页面滚动
			scroll(e) {
				if (this.isLeftClick) {
					this.isLeftClick = false;
					return;
				}
				let scrollTop = e.target.scrollTop;
				for (let i = 0; i < this.topList.length; i++) {
					let h1 = this.topList[i];
					let h2 = this.topList[i + 1];
					if (scrollTop > h1 && scrollTop < h2) {
						this.currentMenu = i;
					}
				}
			},
			// // 滚动到底部
			scrolltolower() {
				console.log(this.isLeftClick)
				if (!this.isLeftClick) {
					setTimeout(() => {
						this.currentMenu = this.rightMenu.length - 1;
					}, 80)
				}
			},
			//  把右边每一个item具体顶部的距离放进数组中
			getNodesInfo(){
				const query =uni.createSelectorQuery().in(this);
				query.selectAll(".right-menu-content").boundingClientRect().exec(res=>{
					let nodes = res[0];
					let arr = [];
					nodes.map(item=>{
						arr.push(item.top);
					})
					this.topList = arr;
				})
			}
		}
	}
</script>

<style lang="scss">
	.all-type {
		height: 100%;
		overflow: hidden;

		.cont-left {
			width: 200rpx;

			.menu-wrap {
				.menu-item {
					padding: 25rpx 0 25rpx 40rpx;

					&.active {
						position: relative;
						background-color: #fff;

						&::before {
							content: '';
							border-radius: 20%;
							display: inline-block;
							position: absolute;
							width: 6rpx;
							height: 40rpx;
							left: 20rpx;
							top: 30rpx;
							background-color: rgb(16, 147, 244)
						}
					}
				}
			}
		}

		.cont-right {
			width: 550rpx;
			background: #fff;
		}
	}
</style>
